<template>
  <div class="address-box">
    <el-row class="address-header">
      <el-col><h3>您好！欢迎&nbsp;{{name}}&nbsp;来到绿竹官网</h3></el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row class="address-title" type="flex" align="middle" justify="start">
      <el-col :span="18"><h2>地址管理</h2></el-col>
      <el-col :span="6"><el-button type="primary" @click="openaddform">新增地址</el-button></el-col>
    </el-row>
    <el-row>
      <el-col>
      <ul>
        <li v-for="item in address" :key="item.id" class="addr-card fl">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="text1">地址</span>
              <i class="el-icon-delete-solid" @click="deleted(item.address_id)"></i>
              <i class="el-icon-edit-outline" @click="findOldAddress(item.address_id)"></i>
            </div>
            <p>收货人：{{item.user_name}}</p>
            <p>手机号码：{{item.address_phone}}</p>
            <h2>收货地址</h2>
            <p>所属地区：{{item.address_name}}</p>
            <p>详细地址：{{item.detailed_address}}</p>
          </el-card>
        </li>
      </ul>
      </el-col>
    </el-row>
    <el-dialog title="新增地址" :visible.sync="isShow1" width="40%">
      <div class="addForm">
      <el-form ref="addAddress" :rules="rules" :model="params" resetFields class="addform">
        <el-form-item label="收货人" prop="user_name">
          <el-input placeholder="请输入收货人姓名" v-model="params.user_name"></el-input>
        </el-form-item>
        <el-form-item label="收货人手机号码" prop="phone">
          <el-input placeholder="请输入手机号码" v-model="params.address_phone"></el-input>
        </el-form-item>
        <el-form-item label="请选择地区">
          <template>
            <v-distpicker @selected="choice"></v-distpicker>
          </template>
        </el-form-item>
        <el-form-item label="所属地区">
          <el-input v-model="addresName"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="detailed_address">
          <el-input placeholder="请输入详细地址" v-model="params.detailed_address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addAddress('addAddress')">提交</el-button>
          <el-button type="primary">重置</el-button>
        </el-form-item>
      </el-form>
      </div>
    </el-dialog>
    <el-dialog title="修改地址" :visible.sync="isShow" width="40%">
      <div class="addForm">
      <el-form ref="updateAddress" :rules="rules" :model="params" resetFields class="addform">
        <el-form-item label="收货人" prop="user_name">
          <el-input placeholder="请输入收货人姓名" v-model="params.user_name"></el-input>
        </el-form-item>
        <el-form-item label="收货人手机号码" prop="phone">
          <el-input placeholder="请输入手机号码" v-model="params.address_phone"></el-input>
        </el-form-item>
        <el-form-item label="请选择地区">
          <template>
            <v-distpicker @selected="choice"></v-distpicker>
          </template>
        </el-form-item>
        <el-form-item label="所属地区">
          <el-input v-model="addresName"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="detailed_address">
          <el-input placeholder="请输入详细地址" v-model="params.detailed_address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateUser('updateAddress')">提交</el-button>
          <el-button type="primary">重置</el-button>
        </el-form-item>
      </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import http from '@/utils/HttpUtil'
import VDistpicker from 'v-distpicker'
export default {
  data () {
    let checkPhone = (rule, value, callback) => {
      let phoneReg = /^1[3456789]\d{9}$/
      if (!phoneReg.test(value)) {
        return callback(new Error('手机号格式不正确!'))
      }
      callback()
    }
    return {
      rules: {
        user_name: [
          {
            required: true, message: '账号不能为空', trigger: 'blur'
          }],
        detailed_address: [
          {
            required: true, message: '姓名不能为空', trigger: 'blur'
          }],
        phone: [
          {
            required: false, message: '手机号不能为空', trigger: 'blur'
          },
          {
            validator: checkPhone, trigger: 'blur'
          }]
      },
      action: {
        selectUserAddress: 'shoes_Web_exploded/Address/selectAddressById',
        deletedOrder: 'shoes_Web_exploded/Address/deletedOrder',
        updateAddress: 'shoes_Web_exploded/Address/updateAddress',
        findAddress: 'shoes_Web_exploded/Address/selectAddressByid',
        addAddress: 'shoes_Web_exploded/Address/addAddress'
      },
      userId: '',
      name: '迎刃而上',
      address: [],
      isShow: false,
      isShow1: false,
      params: {
        address_id: '',
        address_name: '',
        detailed_address: '',
        user_name: '',
        address_phone: '',
        version: ''
      },
      addresName: ''
    }
  },
  components: {
    VDistpicker
  },
  computed: {

  },
  methods: {
    getUserInfo () {
      this.userId = sessionStorage.getItem('user_id')
    },
    choice (data) {
      this.addresName = (data.province.value + '-' + data.city.value + '-' + data.area.value)
    },
    findOldAddress (addressId) {
      this.isShow = true
      http.xhrPost(this, this.action.findAddress + '/' + addressId, null, (res) => {
        this.params.address_id = res.data.address_id
        this.params.address_name = res.data.address_name
        this.params.address_phone = res.data.address_phone
        this.params.user_name = res.data.user_name
        this.params.detailed_address = res.data.detailed_address
        this.params.version = res.data.version
      })
    },
    openaddform () {
      this.isShow1 = true
      this.params = {
        address_id: '',
        address_name: '',
        detailed_address: '',
        user_name: '',
        address_phone: '',
        version: ''
      }
    },
    addAddress (refName) {
      this.$refs[refName].validate((valid) => {
        let params = this.params
        params['address_name'] = this.addresName
        http.xhrPost(this, this.action.addAddress, params, (res) => {
          this.$message({
            type: 'success',
            message: res.message
          })
          this.isShow1 = false
          this.getUserAddress()
          this.params = {
            address_id: '',
            address_name: '',
            detailed_address: '',
            user_name: '',
            address_phone: '',
            version: ''
          }
        })
      })
    },
    updateUser () {
      let params = this.params
      params['address_name'] = this.addresName
      http.xhrPost(this, this.action.updateAddress, params, (res) => {
        this.$message({
          type: 'success',
          message: res.message
        })
        this.params = {
          address_id: '',
          address_name: '',
          detailed_address: '',
          user_name: '',
          address_phone: '',
          version: ''
        }
        this.isShow = false
        this.getUserAddress()
      })
    },
    getUserAddress () {
      http.xhrPost(this, this.action.selectUserAddress + '/' + this.userId, null, (res) => {
        this.address = res.data
      })
    },
    deleted (addressId) {
      this.$confirm('您正在执行批量删除操作', '提示', {
        confirmButtonText: '残忍丢弃',
        cancelButtonText: '容我想想',
        type: 'warning'
      }).then(() => {
        http.xhrPost(this, this.action.deletedOrder + '/' + addressId, null, (res) => {
          console.log(res)
        })
      })
    }
  },
  mounted () {
    this.getUserInfo()
    this.getUserAddress()
  }
}
</script>

<style lang="scss">
  @import '../../assets/style/common.scss';
  .address-box {
    .address-header {
      h3 {
      color: #C40000;
      line-height: 30px;
      font-size: 14px;
      font-weight: normal;
      }
    }
    .address-title {
      margin-bottom: 20px;
      h2 {
        font-size: 24px;
        font-weight: bold;
        color: #727272;
      }
    }
    .addr-card {
      width: 30%;
      margin: 0 0 20px 20px;
      line-height: 30px;
      .box-card {
        .clearfix {
          .text1 {
            margin-right: 130px;
          }
          i {
            color: $red;
            margin-right: 10px;
            cursor: pointer;
            font-size: 18px;
          }
      }
      }
    }
  }
</style>
